import React from 'react';
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
import './index.scss';

class TestPage extends React.PureComponent {
  componentDidMount() {
    Swiper('.swiper-container', {
      loop: true,
      pagination: '.pagination',
      paginationClickable: true,
      centeredSlides: true,
      slidesPerView: 2,
      initialSlide: 2,
      watchActiveIndex: true,
    });
  }
  render() {
    return (
      <div className="test-wrap">
        <div className="swiper">
          <div className="swiper-container">
            <div className="swiper-wrapper">
              <div className="swiper-slide">
                <img className="swiper-item" src="images/test/ditie1.png" />
              </div>
              <div className="swiper-slide">
                <img className="swiper-item" src="images/test/ditie2.png" />
              </div>
              <div className="swiper-slide">
                <img className="swiper-item" src="images/test/ditie3.png" />
              </div>
              <div className="swiper-slide">
                <img className="swiper-item" src="images/test/ditie4.png" />
              </div>
              <div className="swiper-slide">
                <img className="swiper-item" src="images/test/ditie5.png" />
              </div>
            </div>
          </div>
          <div className="pagination" />
        </div>
      </div>
    );
  }
}

export default TestPage;
